<template>
  <el-form :model="form" ref="form" :rules="rules" class="form">
    <!-- 用户名 -->
    <el-form-item prop="username" class="form-item">
      <el-input v-model="form.username" placeholder="用户名手机"> </el-input>
    </el-form-item>
    <!-- 验证码 -->
    <el-form-item prop="captcha"  class="form-item">
      <el-input v-model="form.captcha" placeholder="验证码" @click="handleSendCaptcha"> // 绑定点击事件，声明事件处理函数s
        <template slot="append">
          <el-button @click="handleSendCaptcha"> 发送验证码 </el-button>
        </template>
      </el-input>
    </el-form-item>
    <!-- 昵称 -->
    <el-form-item prop="nickname"  class="form-item">
      <el-input v-model="form.nickname" placeholder="你的名字"> </el-input>
    </el-form-item>
    <!-- 密码 -->
    <el-form-item prop="password" class="form-item">
      <el-input v-model="form.password" placeholder="密码" type="password"></el-input>
    </el-form-item>
    <!-- 确认密码 -->
    <el-form-item prop="checkPassword" class="form-item">
      <el-input v-model="form.checkPassword" placeholder="确认密码" type="password"> </el-input>
    </el-form-item>

    <el-button class="submit" type="primary" @click="handleRegSubmit">
      注册
    </el-button>
  </el-form>
</template>

<script>
export default {
  data(){
    // 确认密码
    const checkPass = (rule,value,callback)=>{
        //console.log(rule,value,callback)        //查看相关信息
        if (value !== this.form.password) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    }
    
    // const validatePass = (rule, value, callback) => {
    //     if (value === '') {
    //         callback(new Error('请再次输入密码'));
    //     } else if (value !== this.form.password) {
    //         callback(new Error('两次输入密码不一致!'));
    //     } else {
    //         callback();
    //     }
    // }
    return {
      // 表单数据
      form: {
            username: "",   // 登录用户名/手机
            password: "",   // 登录密码
            checkPassword: "", // 确认密码
            nickname: "",	// 昵称
            captcha: ""		// 手机验证码
      },
      // 表单规则
      rules: {
        username: [
                { 
                    required: true, 
                    message: '请输入用户名', 
                    trigger: 'blur' 
                },
                {
                    pattern:/^1[3-9]\d{9}$/,message:'手机号码格式不正确',trigger:'blur'
                },
            ],
            password: [{ 
                required: true, 
                message: '请输入密码', 
                trigger: 'blur' 
            }],
            checkPassword: [{ 
                required: true, 
                validator: checkPass, 
                trigger: 'blur' 
            }],
            nickname: [{ 
                required: true, 
                message: '请输入昵称', 
                trigger: 'blur' 
            }],
            captcha: [{ 
                required: true, 
                message: '请输入验证码', 
                trigger: 'blur' 
            }],
        },
    };
  },
  methods: {

    handleRegSubmit(){
    // this.$refs['form'].validate((valid) => {
    //     if (valid) {
    //         // 注册提交
    //         const {checkPassword, ...props} = this.form;

    //         this.$axios({
    //             url: `/captchas`,
    //             method: "POST",
    //             data:{
    //                 tel:this.form.username
    //             }
    //         }).then(res => {
    //             console.log('验证码',res);
    //         })
    //     } 
    // });
    this.$refs.form.validate((bool)=>{
        if(bool){
            // 校验通过 --- 调用接口实现注册
            this.$axios({
                url:'accounts/register',
                method:'post',
                data:{
                    username:this.form.username,
                    password: this.form.password,
                    nickname: this.form.nickname,
                    captcha: this.form.captcha,
                    
                }
            }).then(res=>{
                console.log('注册成功',res)
            })
        }
    })
},

    handleSendCaptcha(){
    // 判断号码是否为空
    if(!this.form.username){
        // this.$confirm('手机号码不能为空', '提示', {
        //     confirmButtonText: '确定',
        //     showCancelButton: false,
        //     type: 'warning'
        // })
        // return;
        return this.$message({
            message:"请输入手机号",
            type:'warning'
        })
    }

    if(this.form.username.length !== 11){
        this.$confirm('手机号码格式错误', '提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'warning'
        })
        return;
    }

    // 发送验证码
    this.$axios({
        url: `/captchas`,
        method: "POST",
        data: {
            tel: this.form.username
        }
    }).then(res => {
        const {code} = res.data;
        this.$confirm(`模拟手机验证码为：${code}`, '提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'warning'
        })
    })
},
  },
};
</script>

<style scoped lang="less">
    .form{
        padding:25px;
    }

    .form-item{
        margin-bottom:20px;
    }

    .form-text{
        font-size:12px;
        color:#409EFF;
        text-align: right;
        line-height: 1;
    }

    .submit{
        width:100%;
        margin-top:10px;
    }
</style>